<template>
  <div class="news-container">
    <!-- 第一部分：大框 -->
    <h1>资讯推介</h1>
    <div class="big-box">
      <div class="left">
        <img src="@/assets/img/chuantongfushi.jpg" alt="News Image">
      </div>

      <div class="right">
        <ul>
          <li v-for="item in news.slice(0, 4)" :key="item.url">
            <a :href="item.url" class="link">&nbsp;{{ item.title }}</a>
            <div class="news_content">{{ item.content }}</div>
          </li>
        </ul>
      </div>
    </div>

    <!-- 第二部分：更多推荐 -->
    <div class="more-recommendations">
      <h2>更多推荐</h2>
      <div class="recommendation" v-for="item in news" :key="item.url">
        <img :src="baseURL+`/file/download?filename=` +item.img" alt="Recommendation Image">
        <div class="recommendation-text">
          <a :href="item.url">{{ item.title }}</a>
          <p>{{ item.content }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {reactive} from "vue";
import {baseURL} from "@/api/request";

const news = reactive([
  {
    "img": "news_1.jpg",
    "title": "第二届中国非物质文化遗产保护年会在宜兴开幕",
    "content": "2024年7月20日，第二届中国非物质文化遗产保护年会开幕式在江苏无锡宜兴的窑湖小镇举办。",
    "url": "https://www.ihchina.cn/news_details/29323.html"
  },
  {
    "img": "news_2.jpg",
    "title": "形成有中国特色的非遗保护制度",
    "content": "2004年8月28日，十届全国人大常委会第十一次会议决定，批准在第32届联合国教科文组织大会上通过的《保护非物质文化遗产公约》。",
    "url": "https://www.ihchina.cn/news_details/29284.html"
  },
  {
    "img": "news_3.jpg",
    "title": "气象万千——中国非遗保护实践主题展",
    "content": "2024年6月7日，“气象万千——中国非遗保护实践主题展”（简称“主题展”）一开幕就人气颇高，展馆端午节假期照常开放并欢迎观众“把非遗带回家”。",
    "url": "https://www.ihchina.cn/news_details/29281.html"
  },
  {
    "img": "news_4.png",
    "title": "各地“文化和自然遗产日”活动亮点纷呈",
    "content": "2024年6月8日是2024年“文化和自然遗产日”，各地文旅部门积极开展多姿多彩、亮点纷呈的线上线下活动。",
    "url": "https://www.ihchina.cn/news_details/29279.html"
  },
  {
    "img": "news_5.png",
    "title": "2024年“文化和自然遗产日” 非遗宣传展示活动启动",
    "content": "2024年6月8日是今年的“文化和自然遗产日”。6月7日，2024年“文化和自然遗产日”非遗宣传展示活动启动仪式在中国非物质文化遗产馆举行。",
    "url": "https://www.ihchina.cn/news_details/29275.html"
  },
  {
    "img": "news_6.jpg",
    "title": "当代五体书法大展暨传统纸砚制作技艺传承活动举办",
    "content": "“继古开今——当代五体书法大展暨书法艺术与中国传统纸砚制作技艺传承发展交流活动”在“千年竹纸之乡”——四川省乐山市夹江县开幕。",
    "url": "https://www.ihchina.cn/news_details/29274.html"
  },
  {
    "img": "news_7.jpg",
    "title": "2024“国际茶日”主题系列活动成功举办",
    "content": "2024年5月21日，正值第五个“国际茶日”，中国工艺美术馆 中国非物质文化遗产馆成功举办“国际茶日”主题系列活动开幕式。",
    "url": "https://www.ihchina.cn/news_details/29262.html"
  },
  {
    "img": "news_8.jpg",
    "title": "恭王府博物馆藏皮影精品展开幕",
    "content": "皮影戏历史悠久，最早的载录见于西汉时期。2024年5月20日，“世间日月·影中乾坤”恭王府博物馆藏皮影精品展在恭王府博物馆开幕。",
    "url": "https://www.ihchina.cn/news_details/29261.html"
  },
  {
    "img": "news_9.jpg",
    "title": "【两会·代表建言】促进文旅深度融合 推动文化传承发展",
    "content": "2024年3月5日，十四届全国人大二次会议在京开幕。就丰富人民群众精神文化生活，代表委员这样建议。",
    "url": "https://www.ihchina.cn/news_details/29038.html"
  },
]);
</script>

<style scoped>
.news_content {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* 显示几行 */
  overflow: hidden;
  padding: 0 5px 2px 5px;
}

.more-recommendations {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.news-container {
  padding-top: 50px;
  background-color: transparent;
  border-radius: 8px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  width: 100%;
  text-align: center;
}

.news-container h1, .news-container h2 {
  font-size: 24px; /* 设置文字大小 */
  color: #333; /* 设置文字颜色 */
  font-weight: bold; /* 设置文字粗细 */
  margin-bottom: 10px; /* 设置文字与下方内容的间距 */
}

.big-box {
  margin-top: 50px;
  display: flex;
  position: relative; /* 父容器设置为相对定位 */
  border-bottom: 1px solid #eee;
}

.left img {
  width: 400px;
  height: 400px;
  display: block;
}

.right {
  background-image: url("@/assets/img/img19.jpg");
  /* 背景图垂直、水平均居中 */
  background-position: center center;
  /* 背景图不平铺 */
  background-repeat: no-repeat;
  /* 让背景图基于容器大小伸缩 */
  background-size: cover;
  /* 设置背景颜色，背景图加载过程中会显示背景色 */
  background-color: #593328;
}

.right ul li {
  width: 710px;
  height: 100px;
  margin-bottom: 0px;
  margin-left: 0;
  padding: 0; /* 内边距 */
  border: 1px solid #ccc; /* 添加边框 */
  border-bottom: 1px dashed #fcf5e8; /* 将底部边框改为虚线 */
  color: white;
}

.right ul li:last-child {
  border-bottom: none; /* 最后一个项目不需要底部边框 */
}

.right ul li a {
  text-decoration: none;
  color: #f6f6f6;
  font-size: 22px;
  display: block;
  transition: color 0.3s ease;
  margin: 10px;
  font-weight: bold;
}

.right ul li a:hover {
  color: #d1c1a4;
}

.news-container .more-recommendations {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 80px;
}

.recommendation {
  flex-basis: 100%; /* 每个推荐项目占据一整行 */
  margin-bottom: 20px; /* 调整下方边距 */
  border: 1px solid #ccc; /* 添加边框，灰色 */
  padding: 20px; /* 调整内边距 */
  height: 120px; /* 设置推荐项目的高度 */
  width: 1060px; /* 使得每个项目占据一半宽度，并考虑 margin 的影响 */
  display: flex; /* 使用 flex 布局 */
  align-items: center; /* 垂直居中项目 */
  text-align: left; /* 调整文字居左 */
  margin-top: 20px;
}

.recommendation img {
  height: 150px;
  width: 180px;
  border-radius: 4px;
  margin-right: 20px; /* 调整图片与文字间距 */
}

.recommendation-text {
  flex: 1; /* 填充剩余空间，使得文本部分占据整个可用宽度 */
}

.recommendation a {
  text-decoration: none;
  font-size: 20px;
  font-weight: bold;
  transition: color 0.3s ease;
  margin-top: 10px; /* 为了保持一致的间距设置 */
  color: #333;
}

.recommendation a:hover {
  color: #555;
}

.recommendation p {
  font-size: 16px;
  margin-top: 10px; /* 为了保持一致的间距设置 */
  font-weight: normal;
}
</style>
